<template>
	<view class="container">
		<view class="df pd30 nav pb20" :style="[{paddingTop:vuex_statusBarHeight+8+'px'}]">
			<view class="sLeft dfx alc">
				<u-avatar :src="vuex_userInfo.face" :size="miniNav?30:40"></u-avatar>
				<text class="ml15 fs40" :class="miniNav&&'fs30'">首页</text>
			</view>

			<image src="@/static/img/index/search.png"
				:style="[{width:miniNav?'46rpx':'56rpx'},{height:miniNav?'46rpx':'56rpx'}]"></image>
		</view>
		<view class="" :style="{height: navBottom+'px'}"></view>

		<view class="banner">
			<view class="tips">
				<view class="b_title">
					流光数字AI
				</view>
				<view class="b_text">
					全栈AI自研的数字人基础设施提供商
				</view>
				<view class="b_text">
					以人工智能驱动短视频&直播超写实虚拟人物
				</view>
			</view>
		</view>

		<view class="">
			<view class="tool">
				<view class="box b1" @click="$tools.navTo('index/gpt')"></view>
				<view class="box b2" @click="$tools.navTo('index/painting')"></view>
			</view>

			<view class="con">
				<view class="ltitle df jb alc">
					<!-- -->
					<view class="fs36b df" style="color: #1c2541;">
						<view class="tline"></view> 我的视频
					</view>
					<view class="fs26 more create df alc" @click="$tools.navTo('index/videoList/add',{id:'video'})">
						去创作
						<image src="../../static/img/index/cz.png" style="width: 24px;height: 24px;" mode=""></image>
					</view>
				</view>
				<view class="list pd30">
					<view class="sbox dfx">
						<view class="sort mr20" :class="[idx==index && 'active']" v-for="(sort,idx) in sorts" :key="idx"
							@click="getData(sort.val,idx)">
							{{sort.label}}
						</view>
					</view>
					<!-- <scroll-view :scroll-top="scrollTop" :scroll-y="miniNav" style="height: 75vh;"> -->
					<scroll-view :scroll-top="scrollTop" :scroll-y="miniNav" :style="{height: scrollHeight+'px'}">
						<view class="listBox df wrap" v-if="videolist.length>0">
							<view class="item" v-for="(item,idx) in videolist" @click="playVideo(item.url)">
								<view class="center">
									<image :src="item.video_image" mode=""></image>
								</view>
								<view class="df alc around bottom" style="background: #f8fbfd;">
									<view class="title text-over">
										{{item.title}}
									</view>
									<view class="delete" :class="item.status|getClass">
										{{item.statusa|statusText}}
									</view>
								</view>
							</view>
						</view>
						<view class="" @click="$tools.navTo('live/live?show=true')" v-else>
							<!-- 内容为空 -->
							<u-empty iconColor="#c4c6c9" textColor="#c4c6c9" text="暂无视频,点击添加" marginTop="50" mode="order"></u-empty>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<playVideo :videoList="videoSrc"></playVideo>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				idx: 0,
				videolist: [],
				index: 0,
				sorts: [{
					label: '全部',
					val: ''
				}, {
					label: '合成中',
					val: '1'
				}, {
					label: '已完成',
					val: '3'
				}, {
					label: '合成失败',
					val: '4'
				}],
				miniNav: false,
				scroll: false,
				scrollTop: 0,
				navBottom: '',
				scrollHeight: '',
				videoSrc: [],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				formInline: {
					page: 1,
					item: 10,
					total: 0
				},
			}
		},
		filters: {
			statusText(value) {
				if (!value) return "";
				return value == 1 ? '合成中' : value == 3 ? '已合成' : '合成失败';
			},
			getClass(value) {
				if (!value) return "";
				return value == 1 ? 'green' : value == 3 ? 'blue' : 'red';
			}
		},
		computed: {
			tops() {
				return this.$store.state.tops + 5
			},
			left() {
				return this.current == 0 ? '31%' : '59%'
			},
		},
		// 监听页面加载
		onLoad() {
			this.$tn.vuex('vuex_userInfo', JSON.parse(uni.getStorageSync('userInfo')));
			this.getSystem()
		},
		onShow() {
			this.getData()
			const PluginName = uni.requireNativePlugin('Hd-LiveSticker');
			// console.log(PluginName);
		},
		mounted() {
			uni.createSelectorQuery().select('.nav').boundingClientRect(data => {
				this.navBottom = data.bottom
			}).exec();
			uni.createSelectorQuery().select('.tool').boundingClientRect(data => {
				this.scrollHeight = this.vuex_windowHeight - data.bottom 
			}).exec();
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				uni.createSelectorQuery().select('.nav').boundingClientRect(data => {
					// console.log(this.navBottom - data.bottom);
					this.navBottom = data.bottom
				}).exec();
				this.miniNav = true
			} else if (e.scrollTop == 0) {
				this.miniNav = false
			}
		},
		// 监听用户下拉刷新
		onPullDownRefresh() {
			this.getData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.formInline.total > this.formInline.page) {
				this.formInline.page++
				this.getData();
			}
		},
		methods: {
			getSystem() {
				uni.getSystemInfo({
					success: res => {
						this.$tn.vuex('vuex_statusBarHeight', res.statusBarHeight);
					}
				})
			},
			fun() {
				// uni.setStorageSync('showProduct', 'carProduct')
				uni.setStorageSync('current', 2)
				this.$tools.navTo('webview/webview')
			},
			playVideo(src) {
				this.videoSrc = [src]
			},
			getData(val, idx) {
				let params = {
					...this.formInline,
					type_s: 2
				}
				if (idx != undefined || idx != null) {
					this.index = idx
					params.statusa = val
				}
				this.$api.get_video_list(params).then(res => {
					// console.log(res,111);
					if (res.code == 200) {
						if (this.formInline.page == 1) {
							this.videolist = res.data.list
						} else {
							this.videolist = this.videolist.concat(res.data.list)
						}
						this.formInline.total = res.data.count
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			change(e) {
				console.log(e, 111111);
				this.current = e
			},
			//tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			//swiper滑动中
			swiperTransition(e) {
				// this.$refs.tabs.setDx(e.detail.dx);
			},
			//swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
			},
		},
	}
</script>

<style lang="scss" scoped>
	// .edgeInsetBottom {
	// 	width: 750rpx;
	// 	height: var(--window-bottom);
	// 	background-color: #FFFFFF;
	// }

	// .fixedView {
	// 	background-color: #4CD964;
	// 	position: fixed;
	// 	width: 750rpx;
	// 	height: 30px;
	// 	bottom: var(--window-bottom);
	// }

	/deep/.u-navbar,
	/deep/.u-navbar__placeholder {
		background: linear-gradient(45deg, #eaf5fe, #eff3fe) !important;
	}

	/deep/.u-icon--left {
		align-items: flex-start !important;
	}

	.hide {
		transition: all 1s;
		display: none;
	}

	.show {
		transition: all 1s;
		display: block;
	}

	.delete {
		// width: 40%;
		padding: 6rpx 10rpx;
		color: #6a97eb;
		font-size: 24rpx;
		text-align: center;
		background: #f5f9ff;
		border-radius: 32rpx;
	}

	.red {
		color: #fa6b6b !important;
		background: #fee6e6 !important;
	}

	.blue {
		color: #6a97eb !important;
		background: #f5f9ff !important;
	}

	.green {
		color: #49e497 !important;
		background: #e6fef2 !important;
	}

	.gray {
		color: #9a9998 !important;
		background: #f0f0f0 !important;
	}

	.container {
		// height: 100vh;
		width: 100vw;
		// overflow-y: scroll;

		.nav {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 999;
			background: linear-gradient(45deg, #eaf5fe, #eff3fe) !important;
		}

		.banner {
			margin: 30rpx 30rpx 0;
			border-radius: 16rpx;
			justify-content: start;
			background: url("@/static/img/index/banner.png") no-repeat;
			background-size: 100%;

			// width: 690rpx;
			height: 270rpx;

			.tips {
				padding-top: 45rpx;
				padding-left: 40rpx;
				color: #666;
			}

			.b_title {
				font-size: 19px;
				font-weight: bold;
				font-style: italic;
				padding-bottom: 10rpx;
				color: #015CE6;
				width: 470rpx;
			}

			.b_text {
				font-size: 28rpx;
				width: 470rpx;
			}

		}

		.top {
			height: 50vh;
			padding-top: 50rpx;
		}

		.nline {
			position: relative;
			left: 34%;
			width: 11vw;
			background: #fff;
			height: 2px;
			transition: all .6s;
		}

		.con {
			margin: 30rpx 30rpx 0;

			.ltitle {

				.create {
					color: #176beb;
					background: #fff;
					border-radius: 16rpx;
					padding: 1px 2px 1px 8px;
					border: 1px solid rgba(255, 255, 255, 1);
				}
			}
		}

		.tool {
			border-radius: 40rpx;
			display: flex;
			justify-content: space-between;
			font-size: 16px;
			text-align: center;
			padding: 0 30rpx;
			margin-top: 30rpx;

			.box {
				color: #fff;
				font-size: 18px;
				font-weight: 700;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				height: 144rpx;
				width: 328rpx;

				image {
					width: 140rpx;
					height: 140rpx;
				}
			}

			.b1 {
				background: url('@/static/img/index/gpt.png') no-repeat;
				background-size: cover;
			}

			.b2 {
				background: url('@/static/img/index/draw.png') no-repeat;
				background-size: cover;
			}

		}

		.sbox {
			margin-bottom: 20rpx;

			.sort {
				border-radius: 32rpx;
				color: #8fbaff;
				background: #eef5ff;
				width: 130rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 14px;
			}

			.active {
				background: #146fff;
				color: #fff;
			}
		}

		.list {
			width: 91%;
			margin-top: 10rpx;
			border-radius: 40rpx;
			background-color: #fff;
			box-shadow: 0px 4px 10px rgba(0, 110, 213, 0.06);
			// height: 50vh;

			.tline {
				background: #217dfd;
				width: 6rpx;
				height: 40rpx;
				margin-right: 10rpx;
				border-radius: 16rpx;
				margin-top: 4rpx;
			}

			.more {
				padding: 4rpx 14rpx;
				background: #fff;
				border-radius: 50px;

			}

			.listBox {

				.item {
					width: 288rpx;
					background: #f4f5f6;
					border-radius: 16rpx;
					overflow: hidden;
					margin-bottom: 30rpx;


					.center {
						width: 288rpx;
						height: 500rpx;
						background: #f8f8f8;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						margin: 16rpx 0rpx 16rpx 10rpx;
						font-size: 24rpx;
						color: #333;
						width: 57%;
						// height: 70rpx;
						// line-height: 70rpx;
					}

					.bottom {
						border-radius: 0 0 16rpx 16rpx;
						box-sizing: border-box;
						border: 1px solid #f3f3f3;
						border-top: 0;
					}
				}
			}
		}

	}
</style>